<template>
  <div id="cesiumContainer"></div>
</template>
 
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  //快速搭建环境时默认的配置
  // const viewer = new Cesium.Viewer('cesiumContainer');

  // 引入服务器提供的图像
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });

  //自定义的配置内容
  var viewer = new Cesium.Viewer('cesiumContainer', {
    //配置是否创建baseLayerPicker小部件
    baseLayerPicker: false,
    //配置图像的提供
    imageryProvider: custom,
    //配置Cesium的世界地形
    terrainProvider: Cesium.createWorldTerrain({
      //配置地形的3D效果
      requestWaterMask: true,
      requestVertexNormals: true
    })
  });
});
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
html,
body,
#cesiumContainer {
  width: 1000px;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>